<template>
  <wd-popup
    :model-value="show"
    custom-style="padding-top: 24rpx;background:#f5f6fa;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view class="close-button" @click="$emit('update:show', false)">
      <wd-icon name="close" size="36rpx" color="#333333" />
    </view>
    <view class="product-property-title">
      商品属性
    </view>
    <view class="product-property-block">
      <template v-for="(tag, index) in propertyTag" :key="tag.id">
        <view v-if="index !== 0" class="divider" />

        <view class="property-info">
          <view class="label">
            {{ tag.name }}
          </view>
          <view class="value">
            {{ tag.tag }}
          </view>
        </view>
      </template>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
const props = defineProps<{
  show: boolean;
  product: SpuVO;
}>();

defineEmits<{
  'update:show': [val: boolean];
}>();

const propertyTag = computed(() => {
  const list = props.product.spu_tag_list;
  if (!list) return [];
  const tagList = list.filter((item) => item.type === 'PROPERTY');
  return tagList.length > 0 ? tagList : [];
});
</script>

<style lang="scss" scoped>
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.product-property-title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 60rpx;
  margin-bottom: 24rpx;
  text-align: center;
}
.product-property-block {
  margin: 0 24rpx 24rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;
  .property-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60rpx;
    gap: 24rpx;
    .label {
      flex-shrink: 0;
    }
    .value {
      flex: 1;
      min-width: 0;
    }
  }
  .divider {
    height: 1px;
    background-color: #eeeeee;
  }
}
</style>
